<template>
    <div class="app-container share">
        <van-nav-bar title="支付"  left-arrow @click-left="$router.back()" />
        <div class="pay-r" v-if="paytype == 1">
            <p class="r-title">您正在使用微信转账</p>
            <img class="img-r" src="@/assets/payment01.jpg" alt="">
            <p class="r-tip tip-mar">扫码后点击"添加备注"输入账号/手机号,如果是单独订阅，输入策略名称，打赏后请返回刷新，几分钟内开通</p>
            <p class="r-tip">若未及时开通，请联系人工客服微信: Grt0104或Mz0508t</p>
        </div>
        <div class="pay-u" v-else>
            <p>请选择TRC20转U，可扫描下方二维码，或复制地址</p>
            <p>TGS4fg8e3Et62mVYrAe3Xze1HB4F8QQehT<span style="margin-left: 2px;" :data-clipboard-text="trc20"  id="copyUrl" class="maincolor">复制</span></p>
            <img class="img-r" src="@/assets/pay-u.jpg" alt="">
            <p>转U请预留足够的链上手续费完成之后请保存转U成功截图,然后联系客服开通</p>
            <p>客服微信Grt0104或Mz0508t</p>
        </div>
    </div>
</template>

<script>
import ClipboardJS from 'clipboard'
import { showToast, showSuccessToast } from 'vant'
export default {
    name: 'Join',
    components: {
    },
    data() {
        return {
            paytype: 2,
            trc20: 'TGS4fg8e3Et62mVYrAe3Xze1HB4F8QQehT',
        }
    },
    created() {
        this.paytype = this.$route.query.paytype;
        this.setCopy()
    },
    methods: {
        setCopy() {
            let clipborad = new ClipboardJS('#copyUrl')
            //复制成功
            clipborad.on('success', function () {
                showSuccessToast('复制成功')
            })
            //复制失败
            clipborad.on('error', function () {
                showToast('复制失败')
            })
        },
    },
}
</script>
<style lang="less">
.van-nav-bar {
    &::after {
        display: none!important;;
    }
}
.pay-r,.pay-u {
    height: calc(100vh - 46px);
    width: 100%;
    font-size: 14px;
    color: #fff;
    text-align: center;
    padding-top: 40px;
    padding: 40px 16px 0;
    box-sizing: border-box;
}
.pay-r {
    background-color: #46a841;
    .r-tip {
        font-size: 12px;
        line-height: 22px;
    }
    .r-title {
        font-size: 20px;
        font-weight: 500;
    }
    
}
.img-r {
    width: 150px;
    margin: 20px 0 30px;
}
.pay-u {
    background-color: #46a841;
}

</style>